<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form ref="checkForm" :model="leave" :rules="ruleValidate" :label-width="100">
            <row>
                <i-col span="12">
                    <Form-item label="开始时间" prop="beginDate">
                        <date-picker  type="date" @on-change="getBeginDate" v-model="leave.beginDate"   placeholder="请选择开始时间" ></date-picker>
                    </Form-item>
                </i-col>
                <i-col span="12">
                    <Form-item label="结束时间" prop="endDate">
                        <date-picker  type="date"  @on-change="getEndDate" v-model="leave.endDate"   placeholder="请选择结束时间" ></date-picker>
                    </Form-item>
                </i-col>
            </row>
            <form-item label="类型"  prop="type" >
                <i-select v-model="leave.type" style="width:200px">
                    <i-option v-for="item in typeList" :value="item.value" :key="item.value">{{item.label}}
                    </i-option>
                </i-select>
            </form-item>
            <form-item prop="reason" label="原因：">
                <i-input  type="textarea" :rows="3" v-model="leave.reason" placeholder="请输入请假原因"></i-input>
            </form-item>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        leave:{

        },
        typeList: [
            {
                value: '年假',
                label: '年假'
            },
            {
                value: '丧假',
                label: '丧假'
            },
            {
                value: '婚假',
                label: '婚假'
            },
            {
                value: '事假',
                label: '事假'
            },
            {
                value: '病假',
                label: '病假'
            },
            {
                value: '其它假',
                label: '其它假'
            },
            {
                value: '产假',
                label: '产假'
            },
            {
                value: '调休假',
                label: '调休假'
            }
        ],
        ruleValidate : {
			reason: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			beginDate: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			endDate: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			type: [
				{ required: true, message: '不能为空', trigger: 'change' }
			]
		},
		okUtils:null,
		okLayer:null
    },
    methods: {
        acceptClick : function(dialog){
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                 layui.use(["okUtils", "okLayer"], function () {
                     okUtils = layui.okUtils;
                     okLayer = layui.okLayer;
                     var a1 = Date.parse(new Date(vm.leave.beginDate));
                     var a2 = Date.parse(new Date(vm.leave.endDate));
                     var day = (a2-a1)/(1000 * 60 * 60 * 24);
                     if(day<0){
                        okLayer.msg.yellowQuestion("是不是傻！！！");
                        return;
                     }
                     vm.leave.day = day+1;
                     okUtils.ajaxCloud({
                        url:"/workflow/leave/save",
                        param : vm.leave,
                        json : true,
                        success : function(result) {
                            okLayer.msg.greenTick(result.msg)
                        }
                     });
                });
            }
          });
	    },
	    getBeginDate : function(beginDate) {
            vm.leave.beginDate = beginDate + "";
        },
        getEndDate : function(endDate) {
            vm.leave.endDate = endDate + "";
        }
    },
    created: function() {

    }
});
</script>
</body>
</html>
